<template>
	<div id="app">
		<el-row>
			<el-col :span="24">
				<el-form :model="queryWhere" :inline="true">
					<el-form-item label="会员昵称">
						<el-input v-model="queryWhere.nickname"></el-input>
					</el-form-item>

					<el-form-item label="会员账号">
						<el-input v-model="queryWhere.username"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="initTableData" icon="el-icon-search">查询</el-button>
					</el-form-item>
				</el-form>

			</el-col>
		</el-row>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>
		<el-table :data="mermberList" stripe border style="width: 100%">

			<el-table-column label="可用状态" prop="flag" width="95">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.flag == 1?true :false" @change="memberStatusChanged(scope.row)">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="username" label="账号" width="100"></el-table-column>
			<el-table-column prop="nickname" label="昵称" width="100"></el-table-column>
			<el-table-column prop="tel" label="手机号" width="150"></el-table-column>
			<el-table-column prop="email" label="邮箱" width="250"></el-table-column>
			<el-table-column prop="sex" label="性别" width="100"></el-table-column>
			<el-table-column prop="address" label="籍贯" width="100"></el-table-column>
			<el-table-column prop="file" label="头像">
				<template slot-scope="scope">
					<el-image style="width: 50px; height: 50px" :src="scope.row.file" fit="fill"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="description" label="个性签名" width="100"></el-table-column>
			<el-table-column prop="integral" label="会员积分" width="100"></el-table-column>

			<el-table-column fixed="right" label="操作" width="150">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" circle @click="editData(scope)">修改</el-button>
				</template>
			</el-table-column>

		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>


		<el-dialog title="修改会员信息" :visible.sync="dialogVisible" width="1024">
			<el-form :model="mermberInfo" :inline="true" label-width="95px">
				<el-form-item label="会员编号:">
					<el-input v-model="mermberInfo.member_id" :disabled="sign"></el-input>
				</el-form-item>
				<el-form-item label="昵称:">
					<el-input v-model="mermberInfo.nickname" :disabled="sign"></el-input>
				</el-form-item>
				<el-form-item label="账号:" label-width="205px">
					<el-input v-model="mermberInfo.username" :disabled="sign"></el-input>
				</el-form-item>
				<el-form-item label="密码:">
					<el-input v-model="mermberInfo.password" :disabled="sign"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPwd">重置密码</el-button>
				</el-form-item>

				<el-form-item label="手机号:">
					<el-input v-model="mermberInfo.tel" :disabled="sign"></el-input>
				</el-form-item>
				<el-form-item label="邮箱:">
					<el-input v-model="mermberInfo.email" :disabled="sign"></el-input>
				</el-form-item>
				<el-form-item label="性别:">

					<el-input v-model="mermberInfo.sex" :disabled="sign"></el-input>
				</el-form-item>
				<el-form-item label="个性签名:">

					<el-input v-model="mermberInfo.description" :disabled="sign"></el-input>
				</el-form-item>

				<el-form-item label="会员积分:">
					<el-input v-model="mermberInfo.integral" :disabled="sign"></el-input>
				</el-form-item>

				<el-form-item label="头像:">
					<el-image style="width: 180px; height: 150px" v-model="mermberInfo.file" fit="fill"
						:disabled="sign"></el-image>
				</el-form-item>


			</el-form>



			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateMermber">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'Member',
		created: function() {
			this.access_token = window.sessionStorage.getItem("token");
		},
		mounted: function() {
			this.initTableData();
		},
		methods: {

			memberStatusChanged: function(memberInfo) {
				let _this = this;
				let url = "/api/mall/MemberServlet.do?method=updateMemberStateExChange";

				this.$http.get(url, {
					params: {
						flag: memberInfo.flag,
						member_id: memberInfo.member_id
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						if (memberInfo.flag != 0) {
							memberInfo.flag = 0;
						} else {
							memberInfo.flag = 1;
						}
						return _this.$message.success("更新会员状态成功！")
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})

			},
			resetPwd: function() {
				this.mermberInfo.password = "123456";
			},
			updateMermber: function() {
				let This = this;
				let url = "/api/mall/MemberServlet.do?method=update";
				this.$http.get(url, {
					params: this.mermberInfo
				}).then(function(response) {
					if (response.data.code == 0) {
						This.dialogVisible = false;
						//把修改后的数据更新到表格中
						for (let attr in This.mermberInfo) {
							This.updateMermberList[attr] = This.mermberInfo[attr]
						}
					}
				}).catch(function(error) {
					This.$notify({
						title: "提示",
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			editData: function(scope) {
				this.dialogVisible = true;
				this.sign = true;
				this.updateMermberList = scope.row;
				for (let attr in this.mermberInfo) {
					this.mermberInfo[attr] = scope.row[attr]
				}
			},
			initTableData: function() {
				let _this = this;
				let url = "/api/mall/MemberServlet.do?method=query&access_token=" + this.access_token;

				this.$http.get(url, {
					params: _this.queryWhere
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;

						_this.pageInfo.pageSize = response.data.data.pageSize;

						_this.mermberList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},

			handleSizeChange: function(pageSize) {
				//alert("修改了每页显示的记录数",val);
				//console.log("修改了每页显示的记录数",val)
				this.queryWhere.pageSize = pageSize;
				this.initTableData(); //重新查数据库。。
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			},

		},
		data: function() {
			return {
				//记录token
				access_token: "",
				queryWhere: {
					nickname: "",
					username: "",
					currentPage: 1,
					pageSize: 5
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},

				mermberList: [],
				mermberInfo: {
					member_id: "",
					username: "",
					password: "",
					nickname: "",
					tel: "",
					email: "",
					sex: "",
					address: "",
					file: "",
					description: "",
					integral: "",
				},
				updateMermberList: {
					member_id: "",
					username: "",
					password: "",
					nickname: "",
					tel: "",
					email: "",
					sex: "",
					address: "",
					file: "",
					description: "",
					integral: "",
				},
				dialogVisible: false,
				sign: false,
			}
		},
	}
</script>

<style>
	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}


	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
